<template>
  <div class="metric-card">
    <div class="icon-container" :class="color">
      <img :src="getImg(icon)" :alt="label" />
    </div>
    <div class="content">
      <h2 class="value">{{ value }}</h2>
      <p class="label">{{ label }}</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  value: {
    type: [String, Number],
    required: true,
  },
  label: {
    type: String,
    required: true,
  },
  icon: {
    type: String,
    required: true,
  },
  color: {
    type: String,
    validator: (value) => ["blue", "yellow", "green", "teal"].includes(value),
    default: "blue",
  },
});
const getImg = (url) => {
  return new URL(`../../../assets/warning/${url}`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.metric-card {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;

  .icon-container {
    width: 62px;
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-right: 16px;

    &.blue {
      background: #f0f8fe;
    }
    &.yellow {
      background: #fff5e9;
    }
    &.green {
      background: #f1fcf4;
    }
    &.teal {
      background: #f1fcfc;
    }

    img {
      width: 32px;
      height: 32px;
    }
  }

  .content {
    .value {
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      line-height: 28px;
      margin: 0;
    }

    .label {
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 16px;
      margin-top: 4px;
    }
  }
}
</style>